<template>
    <div>
      <!-- 面包屑导航区域 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/admin/home' }"
          >首页</el-breadcrumb-item
        >
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单列表</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 卡片视图 -->
      <el-card class="box-card">
        <!-- 搜索与添加区域 -->
        <el-row :gutter="20">
          <el-col :span="16">
            <!-- 搜索与添加区域 -->
            <el-input
              :placeholder="'请输入' + selected"
              v-model="input"
              clearable
            >
              <el-select
                v-model="selected"
                class="select"
                slot="prepend"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="getCollegeList(true)"
              ></el-button>
              <el-button
                slot="append"
                icon="el-icon-refresh-right"
                @click="getCollegeList(false)"
              ></el-button>
            </el-input>
          </el-col>
          <el-col :span="2">
              <el-button v-waves :loading="downloadLoading" type="primary" icon="el-icon-download" @click="handleDownload">
                  导出为Excel
              </el-button>
          </el-col>
        </el-row>
        <!-- 列表区域 -->
        <el-table :data="collegeListShow" border stripe  default-sort 
        highlight-current-row
        :ref="singleTable"
        @current-change="handleCurrentChangeTable">
          <!-- 自定义索引 -->
          <!-- <el-table-column type="index"> </el-table-column> -->
          <el-table-column prop="id" label="订单编号" sortable></el-table-column>
          <el-table-column prop="time" label="时间" ></el-table-column>
          <el-table-column prop="cust" label="下单人姓名"></el-table-column>
          <el-table-column prop="value" label="金额"
          :filters="[{ text: '10-20元', value: '1' }, { text: '20-50元', value: '2' },{text: '50元及以上' ,value : '3'}]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
          ></el-table-column>
          <el-table-column prop="tip" label="备注">
            <template slot-scope="{row}">
                <el-tag>{{row.tip}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="操作" >
            <template slot-scope="{row,$index}">
              <el-button v-if="row.status!='未接单'" size="mini" type="success" @click="handleModifyStatus(row,'未接单')">
                    已接单
                </el-button>
                <el-button v-if="row.status!='已接单'" size="mini" type="danger" @click="handleModifyStatus(row,'已接单')">
                    未接单
                </el-button>  
                <el-button v-if="row.status=='已完成'" size="mini" type="info">
                  已完成
              </el-button>  
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页栏 -->
        <el-pagination align='center' 
        @size-change="handleSizeChange" 
        @current-change="handleCurrentChange"
        :current-page="currentPage" 
        :page-sizes="[5,10,20]" 
        :page-size="pageSize" 
        layout="total, sizes, prev, pager, next, jumper" 
        :total="collegeList.length">
     </el-pagination>
         
      </el-card>
      <el-card class="box-card-order">
        <p class="serif">订单详情</p>
        <el-divider><i class="el-icon-bell"></i></el-divider>
        <div class="step">
          <el-steps :space="200" :active="this.iconStatus" finish-status="success">
            <el-step title="未接单"></el-step>
            <el-step title="已接单"></el-step>
            <el-step title="已完成"></el-step>
          </el-steps>
        </div>
        <p class="serif-head"> 订单编号:</p>
        <p class="serif-body">{{this.currentRow.id}}</p><br/>
        <p class="serif-head"> 联系电话:</p>
        <p class="serif-body">{{this.currentRow.phone}}</p><br/>
        <p class="serif-head"> 下单时间:</p>
        <p class="serif-body">{{this.currentRow.time}}</p><br/>
        <p class="serif-head"> 顾客昵称:</p>
        <p class="serif-body">{{this.currentRow.cust}}</p><br/>
        <p class="serif-head"> 下单金额:</p>
        <p class="serif-body">{{this.currentRow.value}}</p><br/>
        <p class="serif-head"> 下单菜品:</p>
        <el-table :data="this.currentRow.foods" class="tableOrder" size="mini">
          <el-table-column prop="food" label="菜品" min-width="3"></el-table-column>
          <el-table-column prop="num" label="数量" min-width="3"></el-table-column>
        </el-table>
        <p class="serif-head"> 另加备注:</p>
        <p class="serif-body"><el-tag>
          {{this.currentRow.tip}}
        </el-tag></p><br/>
      </el-card>
    </div>
  </template>
  <script>
  import axios from 'axios'
  
  var constList = [
    {
          id: 0,
          phone: '1800000000',
          time: '12:00',
          cust: 'Jack',
          value: '55',
          foods:[
            {
              food:'面条',
              num : 2
            },
            {
              food: '米饭',
              num: 3
            }
          ],
          tip: '分开装',
          status: '未接单'
    },
    {
          id: 1,
          phone: '1230000000',
          time: '13:00',
          cust: 'Sherlock',
          value: '30',
          foods:[
            {
              food:'牛肉面',
              num: 1,
            },
            {
              food:'盖浇饭',
              num: 3
            }
          ],
          tip: '不要辣',
          status: '已接单'
    }
  ]
  
  
  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          '上架': 'success',
          '下架': 'info',
        }
        return statusMap[status]
      },
      typeFilter(type) {
        return calendarTypeKeyValue[type]
      }
    },
    data() {
      return {
      constImage:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      downloadLoading: false,
      value1:null,
      errorStr:'',
      imgStr:'',
        options: [
          {
            value: '订单编号',
            label: '订单编号',
          },
          {
            value: '订单人姓名',
            label: '订单人姓名',
          },
      
        ],
        iconStatus : 0,
        selectedType:'',
        selected: '订单编号', // 搜索选择
        input: '', // 搜索输入框
        collegeList: [], // 院系列表
        collegeListShow: [], // 展示的院系列表
        total: 0, // 院系列表总数
        currentPage: 1, // 当前页面
        pageSize: 5, // 每页展示列表数
        // 控制添加对话框显示与隐藏
        addDialogVisible: false,
        currentRow:'',
        // 添加院系的表单数据
        addForm: {
          id: '',
          food: '',
          price: '',
          desc: '',
          stock: 0,
          type: '',
          rec: 0,
          img:'',
          status:''
        },
        // 添加表单的验证规则
        addFormRules: {
          id: [
            { required: true, message: '请输入菜品编号', trigger: 'blur' },
            {
              pattern: /[0-9]+$/,
              message: '编号不合法',
              trigger: 'blur',
            },
          ],
          food: [
            { required: true, message: '请输入菜品名', trigger: 'blur' },
            {
              min: 2,
              max: 20,
              message: '菜品名长度在2~20个字符之间',
              trigger: 'blur',
            },
          ],
        },
        // 控制修改对话框显示与隐藏
        editDialogVisible: false,
        // 查询到的院系信息
        editForm: {
          food: '',
        },
        // 修改表单的验证规则
        editFormRules: {
          food: [
            { required: false, message: '请输入菜品名', trigger: 'blur' },
            {
              min: 3,
              max: 20,
              message: '菜品名长度在3~20个字符之间',
              trigger: 'blur',
            },
          ],
        },
      }
    },
    created() {
      this.getCollegeList()
    },
    methods: {
      filterTag(value, row) {
        console.log(value)
        console.log(row)
        if(value == 1) {
          if(row.value >= 10 && row.value <= 20) {
              return true 
          } 
        }else if(value == 2) {
          if(row.value >= 20 && row.value <= 50) {
              return true 
          } 
        } else if(value == 3){
          if(row.value >= 50) return true
        }
        return false
      },
      handleCurrentChangeTable(val) {
        this.currentRow = val
        console.log(this.currentRow)
        if(this.currentRow.status == '未接单'){
          this.iconStatus =  1
        }
        if(this.currentRow.status == '已接单')
        {this.iconStatus =  2}
        if(this.currentRow.status == '已完成') {
        this.iconStatus =  3
        }
        console.log(this.iconStatus)
      },
    handleModifyStatus(row, status) {
      row.status = status
      var query = {}
      if(status === "已接单") {
        query = {id : row.id}
        axios.post('/business/acorder',query)
        .then((res)=>{
          if(res.data.state !== 0) this.$message.error("接单失败")
          else this.$message.success("接单成功")
        })
      }
    },
      // 获取院系列表
      async getCollegeList(search) {
        var query = {}
        if (search) {
          if (this.selected === '订单编号') {
            query = { id: this.input }
          } else if (this.selected === '订单人姓名') {
            query = { cust: this.input }
          } 
          console.log(query)
          axios.post(`/business/anyorder`,query)
          .then((res) => {
            var list = []
            list.push(res.data)
            console.log(res.data)
            this.collegeList = res.data
            // this.collegeListShow = this.collegeList.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
            this.collegeListShow = this.collegeList.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
            console.log(this.collegeListShow)
            if (res.status !== 200) return this.$message.error('获取列表失败')
          })
        } else {
          axios.post(`/business/allorder`,query)
          .then((res) => { 
            this.collegeList = res.data;
            // this.collegeList = constList;
            this.currentPage = 1;
            this.collegeListShow = this.collegeList.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
            console.log(this.collegeList)
          if (res.status !== 200) return this.$message.error('获取列表失败')
          })
            // this.collegeList = constList;
            // this.currentPage = 1;
            // var start = 0;
            // var end = start + this.pageSize;
            // this.collegeListShow = this.collegeList.slice(start, end)
        }
      },
      
      // 监听对话框关闭事件
      addDialogClosed() {
        // 重置表单
        this.$refs.addFormRef.resetFields()
      },
      handleDownload() {
        this.downloadLoading = true
        import('../commodity/vendor/Export2Excel').then(excel => {
          const tHeader = ['订单编号', '联系人电话', '下单时间', '下单人姓名', '下单金额','备注']
          const filterVal = ['id', 'phone', 'time', 'cust', 'value', 'tip']
          const data = this.formatJson(filterVal)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: '订单信息'
          })
          this.downloadLoading = false
        })
      },
      
      // 监听修改对话框的关闭事件
      editDialogClosed() {
        this.$refs.editFormRef.resetFields()
      },
      // 监听分页变化
      handleSizeChange(pageSize) {
        this.currentPage = 1;
        this.pageSize = pageSize
        let start = 0
        let end = start + pageSize
        this.collegeListShow = this.collegeList.slice(start, end)
      },
      // 监听当前页面变化
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage
        let start = (currentPage - 1) * this.pageSize
        let end = start + this.pageSize
        this.collegeListShow = this.collegeList.slice(start, end)
      },
    //   handleSizeChange(val) {
    //      console.log(`每页 ${val} 条`);
    //      this.currentPage = 1;
    //      this.pageSize = val;
    //  },
    //  //当前页改变时触发 跳转其他页
    //  handleCurrentChange(val) {
    //      console.log(`当前页: ${val}`);
    //      this.currentPage = val;
    //  }
    }
  }
  </script>
  <style lang="less" scoped>
  p.serif-head {
    font-family:"微软雅黑";
    font-size:17px;
    font-size: bold;
    display: inline-table;
    margin-right: 100px;
    margin-left:10px;
    margin-bottom: -100px;
  }
  p.serif-body {
    font-family:"微软雅黑";
    font-size:15px;
    display: inline-table;
    margin-bottom: -100px;
  }
  p.serif{
    font-family:"微软雅黑";
    font-size:25px;
    font-size: bold;
    margin-top: -5px;
    margin-bottom: -5px;
  }
  .tableOrder {
    margin-left: 10px;
  }
  .el-col-4 {
      width: 10%;
  }
  .box-card {
      width: 800x;
      height: 600px;
      float: left;
  }
  .box-card-order{
    width: 420px;
    height: 600px;
    float: right;
    margin-right: 10px;
    overflow-y:auto 
  }
  .select {
    width: 120px;
  }
  .pagination {
    margin-top: 15px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .imageConst {
    width: 50px;
    height: 50px;
    margin-left: 10px;
  }
  .step {
    margin-left: 80px;
  }
  </style>